<template>
  <div class="container">
    <MyNavHead> 我的订单 </MyNavHead>
    <ul class="box">
      <li>
        <div class="icon-box">
          <img src="../../assets/image/icon_fangzu.png" alt="" />
        </div>
        <div class="text-box">
          <h3>房租</h3>
          <p>查看租房等订单</p>
        </div>
      </li>
      <li>
        <div class="icon-box">
          <img src="../../assets/image/icon_shangcheng.png" alt="" />
        </div>
        <div class="text-box">
          <h3>商城</h3>
          <p>查看家具，家电，等订单</p>
        </div>
      </li>
      <li>
        <div class="icon-box">
          <img src="../../assets/image/icon_shenghuofuwu.png" alt="" />
        </div>
        <div class="text-box">
          <h3>生活服务</h3>
          <p>查看保洁，维修，等订单</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import MyNavHead from "../../components/MyNavHead";
export default {
  name: "MyOrder",
  components: {
    MyNavHead,
  },
};
</script>

<style scoped lang="less">
.container {
  margin-top: 1.2rem;
  .box {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0.2rem;
    background: #f1f1f1;
    li {
      width: 100%;
      height: 1.6rem;
      margin-bottom: 0.2rem;
      background: #fff;
      display: flex;
      .icon-box {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.8rem;
          height: 0.8rem;
        }
      }
      .text-box {
        text-align: left;
        width: 80%;
        height: 100%;
        color: rgba(0,0,0,.8);
        h3{
          font-weight: normal;
          font-size: 18px;
          margin-top: .3rem;
          width: 100%;
        }
        p{
          width: 100%;
          font-size: 16px;
          margin-top: .05rem;
        }
      }
    }
  }
}
</style>